<template>
  <div class="map" ref="map" @click="exitHandle"></div>
</template>

<script>
import { onMounted, ref } from 'vue'

import { initMap, exitHandle } from './mapUtils'
export default {
  setup() {
    let map = ref()

    onMounted(() => {
      initMap(map.value)
    })

    return {
      map,
      exitHandle,
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
body {
  margin: 0;
  padding: 0;
  background: url('~@/assets/pageBg.png');
}
.map {
  width: 100vw;
  height: 100vh;
}
</style>
